<template>
  <div style="background-color: #ffffff">
    <pageTitle title="私人" />
    <div style="padding: 20px">
      <el-table
        :data="dataSource"
        style="width: 100%"
        stripe
        border
        v-loading="loading"
      >
        <el-table-column prop="nickname" label="名称">
          <template slot-scope="scope">
            {{ scope.row }}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="100">
          <template slot-scope="scope">
            <el-button size="mini" @click="openVideo(scope.row)"
              >播放</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div class="flex">
        <el-pagination
          :page-size="limit"
          :current-page="page + 1"
          background
          @current-change="changePage"
          layout="prev, pager, next"
          :total="total"
          style="margin: auto; padding-top: 20px"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<style>
.text {
  font-size: 14px;
}

.item {
  padding: 5px 20px;
}
</style>

<script>
import pageTitle from "@/components/pageTitle";
import privateApi from "@/API/privateApi";
export default {
  components: { pageTitle },
  data() {
    return {
      limit: 10,
      page: 0,
      lists: [],
      total: 0,
      loading: false,
    };
  },
  mounted() {
    this.getLists();
  },
  computed: {
    dataSource() {
      let page = this.page;
      let limit = this.limit;
      return this.lists.filter((item, index) => {
        return index > page * limit && index <= (page + 1) * limit;
      });
    },
  },
  methods: {
    async getLists() {
      try {
        this.loading = true;
        let { data } = await privateApi.getLists();
        this.lists = data.data.list;
        this.total = parseInt(data.data.total);
        setTimeout(() => {
          this.loading = false;
        }, 300);
      } catch (err) {
        this.loading = false;
        console.log(err);
      }
    },
    openVideo(src) {
      var page = window.open();
      var html =
        "<body style='background:black'> <div style='width:80%;margin:auto;'> <video controls width='100%'  height='90%' autoplay src='http://localhost/private/" +
        src +
        "'></video></div></body>";
      page.document.write(html);
    },
    changePage(e) {
      this.page = parseInt(e) - 1;
    },
  },
};
</script>